<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		省：<select id="slcProvice"></select> 市：<select id="slcCity"></select>选择结果：<input type="text" id="txtArea" /> 
		
		<script src="area.js" type="text/javascript"></script>
		<script>
			var objProvice = {};
			var eleProvice = document.getElementById('slcProvice');
			var eleCity = document.getElementById('slcCity');
			
			var html = "<option value=''>请选择省</option>";
			var proviceName = "";
			for(var i=0; i<provice.length; i++){
				 proviceName = provice[i].name;
				 objProvice[proviceName] = provice[i].city;
			     html += "<option value='" + proviceName + "'>" + proviceName + "</option>";
			 }
			eleProvice.innerHTML = html;
			
			var eleCity = document.getElementById("slcCity");
			// onchange事件.当html元素的值改变时触发
			eleProvice.onchange = function(){
				var proviceName = this.value;
				var cityList = objProvice[proviceName];
				html = "<option value=''>请选择市</option>";
				for(var i=0; i<cityList.length; i++){
					var cityName = cityList[i].name;
					html += "<option value='" + cityName + "'>" + cityName + "</option>";
				}
				eleCity.innerHTML = html;
			}
		</script>
	</body>
</html>
